<style lang="scss" scoped>
  .size5 {
    font-size: 5vw;
  }
  .search-cookie {
    .cookie_operation {
      margin-bottom: 3vw;
    }
    .loading {
      position: absolute;
      top: 24vw;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
</style>

<template lang="pug">
  .search-cookie
    .search_box.container_min
      .cookie_operation.box_between
        icon.size5(icon="trash" @click="$emit('delCookie')")
        span.size5.blue(@click="close" v-if="show") 返回
      mu-container.loading(data-mu-loading-color="secondary" data-mu-loading-overlay-color="rgba(0, 0, 0, .7)" v-loading="loading" v-show="loading" class="demo-loading-wrap")
      cookie-box(v-show="storageShow" @click="copy" :storageData="storageData" @delCookie="delCookie")
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import cookieBox from './cookie'


  export default {
    name: "search-cookie",
    props: ['show', 'val', 'storageShow', 'storageData', 'loading'],
    data() {
      return {}
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),

    },
    methods: {
      ...mapMutations([]),
      close() {
        this.$emit('update:val', '')//清空input
        this.$emit('update:show', false)//隐藏布局
        this.$emit('update:storageShow', true)// 显示storage布局
        this.$emit('update:loading', false)//隐藏loading
      },
      copy(val, b) {
        this.$emit('update:val', val)
        this.$emit('update:storageShow', b)
      },
      delCookie(val) {
        this.$emit('delCookie', val);
      }
    },
    created() {

    },
    mounted() {

    },
    components: {
      cookieBox
    }
  }
</script>

